<template>
  <div>
    <div class="content-box">
      <dv-border-box-11 style="width:24%" title="模型的创建">
        <RTopLeft/>
      </dv-border-box-11>
      <dv-border-box-11 style="width: 35%" title="控制台">
        <RCenter/>
      </dv-border-box-11>
      <dv-border-box-11 style="width:34%" title="模型列表">
        <RTopRight/>
      </dv-border-box-11>
    </div>
    <div class="bottom-box">
      <dv-border-box-11 style="width: 24%;height: 500px" title="预测结果">
        <dv-table/>
      </dv-border-box-11>
      <dv-border-box-11 style="width: 20%;height: 500px" title="样本数量">
        <RBottomLeft/>
      </dv-border-box-11>
      <dv-border-box-11 style="width: 31%;height: 500px" title="模型评价">
        <RBottomRight/>
      </dv-border-box-11>
      <dv-border-box-11 style="width: 20%;height: 500px" title="最终得分">
        <score></score>
      </dv-border-box-11>
    </div>
  </div>
</template>

<script>
import dvMenu from '@/components/dv-menu'
import dvTable from "@/components/dv-table";
import RCenter from "./region-center"
import RTopLeft from "./region-top-left";
import RTopRight from "./region-top-right";
import RBottomRight from "./region-bottom-right.vue";
import RBottomLeft from "./region-bottom-left.vue";
import RegionBottomCenterLeft from "@/views/dataView/region-bottom-center-left.vue";
import score from "@/views/modelView/score";
export default {
  components: {RCenter, RTopLeft, dvTable, RTopRight, RBottomRight, RBottomLeft, dvMenu, RegionBottomCenterLeft, score},
  data() {
    return {
      loading: true,
      report: {
        "accuracy": {
          data: [
            {
              name: 'precision',
              value: 167
            },
            {
              name: 'recall',
              value: 67
            },
            {
              name: 'f1-score',
              value: 123
            },
            {
              name: 'support',
              value: 55
            },
          ],
          showValue: true
        },
        "macro avg": {},
        "weighted avg": {},
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.loading = false
    }, 500)
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
#index {
  color: #d3d6dd;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;
}

#index .bg {
  width: 100%;
  height: 100%;
  padding: 16px 16px 0 16px;
  background-image: url("../../assets/pageBg.png");
  background-size: cover;
  background-position: center center;
}

#index .host-body .body-box {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
}

#index .host-body .body-box .content-box {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

#index .host-body .body-box .bottom-box {
  display: flex;
  justify-content: space-around;


}
</style>
<style>
/*覆盖左下第一个图表的样式*/


.dv-scroll-board .header .header-item {
  font-size: 20px;
}

.dv-scroll-board .header .header-item {
  font-size: 20px;
}

.dv-scroll-board .rows .ceil {
  font-size: 18px;
}

/*覆盖左下第二个图表的样式*/
.dv-capsule-chart .label-column {
  font-size: 20px;
}

.dv-capsule-chart .capsule-item .capsule-item-column .capsule-item-value {
  font-size: 20px;
}

.dv-capsule-chart .unit-label {
  font-size: 20px;
}

.dv-capsule-chart .label-column {
  font-size: 20px;
}
</style>
